<template>
	<div class="list" :style="{paddingBottom:showBar?'40px':''}">
		<link rel="stylesheet" href="//at.alicdn.com/t/font_1592243_edabzejozd.css">
		<!-- 专辑列表详情页,需要专辑ID -->
		<div class="blumTitle">
			<section class="bg-into">
				<i class="fh iconfont icon-fanhuijian" @click="fanhui"></i>
				<div class="bg" :style="bgIMg">
				</div>
				<div class="plhead_wrap">
					<div class="plhead_fl">
						<span class="lsthd-icon">歌单</span>
						<i class="ejting iconfont icon-erji"> {{forMatMoney(playCount)}}</i>
						<img :src=coverImgUrl alt="">
					</div>
					<div class="plhead_fr">
						<!-- 歌单名 -->
						<h2>{{ listName }}</h2>
						<div class="plhead-user">
							<a href="">
								<!-- 创建歌单用户 -->
								<div class="user-img">
									<img :src=listImg alt="">
								</div>
								{{ listUser }}
							</a>
						</div>
					</div>
				</div>
			</section>
			<section class="blumInto">
				<!-- 专辑标签 -->
				<div class="lstit_tags">
					标签：
						<span class="taga-item" v-for="(item,index) in tags" :key="index">{{item}}</span>
				</div>
				<div class="u-intro">
					<div class="f-brk"  v-for="(item,index) in intro" :key="index">
						<span>{{item}}</span>
						<br>
					</div>
					<div class="intro_arrow ">
						<i class="iconfont " ></i>
					</div>
				</div>
			</section>
		</div>
		<div class="songlist">
			<div class="songPaly">
				<span><i class="iconfont icon-start"></i> 全部播放</span>
				<span><i class="iconfont icon-shoucang"></i> 收藏</span>
			</div>
			<song class="song-item" v-for="(item,index) in songItem" :key="index"
				:songData="{
					songIdx:index,
					picUrl:item.al.picUrl,
					songName:item.name,
					ar:item.ar[0].name,
					al:item.al.name,
					id:item.id,
					itemMp3:item,
					songlist:songLists
					}"
				:playList="ListIdData"
				:songIndex="index"
			>
			</song>
			<audio src=""></audio>
		</div>
	</div>
</template>

<script>
import api from '../js/api.js';
import song from "../components/song.vue"
export default {
	data() {
		return {
			// 歌单数组
			coverImgUrl:"",
			// 歌单背景图
			bgIMg:"",
			// 歌单名
			listName:"",
			// 创建歌单用户头像
			listImg:"",
			// 创建歌单用户名
			listUser:"",
			// 歌单播放量
			playCount:"",
			// 标签
			tags:"",
			// 简介
			intro:[],
			// 歌单选中歌曲信息
			songItem:null,
			isTrue:false,
			songLists:[
				{
					al:{
						picUrl:null
					}
				}
			],
			ListIdData:null,//播放专辑列表所有歌曲的Id
			
		}
	},
	components:{
		song
	},
	created() {
		let songid = this.$route.query.id;
		// window.console.log(songid);
		// window.console.log(api.playlistDetail+songid);
		this.songLists = this.$route.query.listfh;
		// this.mp3Pfn = this.$route.query.playFn;
		this.axios({
			url:api.playlistDetail+songid
		}).then(res=>{
			// window.console.log(res);
			this.songLists = res.data.playlist;
			// window.console.log(this.songLists);
			this.coverImgUrl = res.data.playlist.coverImgUrl;
			this.bgIMg = "background-image: url("+this.coverImgUrl+");"
			this.listName = this.songLists.name,
			this.listImg = this.songLists.creator.avatarUrl,
			this.listUser = this.songLists.creator.nickname,
			this.playCount = this.songLists.playCount;
			this.tags = this.songLists.tags;
			this.songItem = this.songLists.tracks;
			// window.console.log(this.songItem);
			this.ListIdData = this.songLists.tracks.map(e=>e.id);
			this.intro = this.songLists.description.split("\n");
			// window.console.log(this.intro);
		});
	},
	computed: {
		showBar(){
			return this.$store.state.musicData.al.id;
		},
	},
	methods: {
		fanhui(){
			this.$router.push({
				path: '/recommend',
			})  
		},
		forMatMoney(num){
			// console.log("函数调用所得");
			return (num/10000).toFixed(1) + "万";
		},
		fanhui(){
			this.$router.push({
				path: '/recommend',
			})  
		},
	}, 
	
}
</script>

<style lang="scss" scoped>
	.list{
		.blumTitle{
			.bg-into{
				position: relative;
				padding: 30px 10px 30px 15px;
				overflow: hidden;
				.fh{
					position: absolute;
					font-size: 18px;
					color: white;
					display: block;
					text-align: left;
					margin-top: -22px;
				}
				.bg{
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					z-index: -1;
					background-repeat: no-repeat;
					background-size: cover;
					background-position: 50%;
					filter: blur(20px);
					transform: scale(1.5);
					&::after {
						content: " ";
						position: absolute;
						left: 0;
						top: 0;
						right: 0;
						bottom: 0;
						background-color: rgba(0,0,0,.25);
					}
				}
				
				.plhead_wrap{
					display: flex;
					position: relative;
					text-align: left;
					.plhead_fl{
						width: 126px;
						float: left;
						position: relative;
						.lsthd-icon{
							position: absolute;
							top: 10px;
							left: 0;
							padding: 0 8px;
							height: 17px;
							color: #fff;
							font-size: 9px;
							text-align: center;
							line-height: 17px;
							background-color: rgba(217,48,48,.8);
							border-top-right-radius: 17px;
							border-bottom-right-radius: 17px;
						}
						
						img{
							width: 100%;
						}
						.ejting{
							position: absolute;
							right: 2px;
							top: 0;
							padding-left: 15px;
							color: #fff;
							font-size: 12px;
							background-position: 0;
							background-repeat: no-repeat;
							background-size: 11px 10px;
							text-shadow: 1px 0 0 rgba(0,0,0,.15);
						}
					}
					.plhead_fr{
						width: 208px;
						float: right;
						flex: 1 1 auto;
						width: 1%;
						margin-left: 16px;
						h2{
							padding-top: 1px;
							font-size: 17px;
							line-height: 1.3;
							color: #fefefe;
							height: 44px;
							display: -webkit-box;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							word-wrap: break-word;
							white-space: normal;
						}
						.plhead-user{
							display: block;
							position: relative;
							margin-top: 20px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							word-break: normal;
							a{
								color: hsla(0,0%,100%,.7);
								.user-img{
									display: inline-block;
									width: 30px;
									height: 30px;
									border-radius: 50%;
									vertical-align: middle;
									margin-right: 5px;
									img{
										width: 100%;
										vertical-align: middle;
										border-radius: 50%;
									}
								}
							}
						}
					}
				}
			}
		}
		.blumInto{
			height: 118px;
			position: relative;
			margin: 0 10px 0 15px;
			padding-top: 10px;
			line-height: 19px;
			color: #666;
			overflow: hidden;
			.lstit_tags{
				font-size: 14px;
				display: flex;
				margin-bottom: 10px;
				line-height: 20px;
				margin-right: -10px;
				span{
					display: inline-block;
					border: 1px solid gainsboro;
					border-radius: 20px;
					margin-right: 10px;
					padding: 0 8px;
					font-size: 12px;
				}
			}
			.u-intro{
				position: relative;
				font-size: 14px;
				padding-bottom: 18px;
				line-height: 19px;
				color: #666;
				.f-brk{
					text-align: left;
					span{
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}
				}
				.intro_arrow{
					position: absolute;
					bottom: 3px;
					right: 0;
					width: 15px;
					height: 15px;
					background-position: 50%;
					background-repeat: no-repeat;
					background-size: 12px auto;
				}
			}
		}
		.songlist{
			// 歌单歌曲列表
			padding: 10px 6px 2px;
			background-color: white;
			color: black;
			.songPaly{
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;
				i{
					font-size: 16px;
					vertical-align: baseline;
				}
				span{
					font-size: 14px;
				}
			}
		}
	}
</style>
